<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>登录界面</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		li{list-style: none;}
		.dljiemian{
			display:block;
			width:1000px;
			height:400px;
			padding:50px 0;
			margin:50px auto;
			background-image: url(images/网易云2.jpg);
			font-size: 16px;
		}
		ul{
			display: block;
			width:400px;
			height:380px;
			margin: 0 auto;
			background-color:rgba(255,255,255,.5); 
			border-radius: 5px;
			border:1px solid #00d6c9;
			padding-top:20px; 
		}
		ul li{
			padding-left:50px;
			padding-right:50px; 
			height:40px;
			line-height: 40px;
			margin-top:50px;
			text-align: center;	
		}
		ul li a{
			display: block;
			color: #FFF;
			width:78px;
			height:38px;
			border-radius: 5px;
			border:1px solid #4ea6a79e;
			background-color: #9c27b0c4;
			text-decoration: none;
			text-align: center;
			margin:0 auto;
		}
		a:hover{
			color: #b406d2;
			background-color:#ffffff5c;
		}
		input{
			text-indent: 1em;
			width:200px;
			height:38px;
			border:none;
			border-radius: 5px;
			outline: none;
		}
		#checkbox{
			width:20px;
			height:20px;
		}
	</style>
	<script src="jquery.min.js"></script>
	<script type="text/javascript">
		String.prototype.parseCookie = function() {
				var arr =document.cookie.split(";");
				var obj ={};
				arr.forEach((item)=>{
					obj[item.split("=")[0].replace(" ","")]= item.split("=")[1]
				})
				return obj;	
			};
		$(function(){
			//记录用户名和密码
			var cookies =document.cookie.parseCookie();
			$("#id").val(cookies.username);
			$("#password").val(cookies.password);
			function cookieDay(day){
				var date = new Date();
				date.setDate(date.getDate() + day);
				return date;
			}
			$("#denglu").click(function(){
				if(($("#checkbox").prop("checked"))){
									var username=$("#id").val();
									var password=$("#password").val();
									document.cookie =`username=${username};expires=${cookieDay(30)}`;
									document.cookie =`password=${password};expires=${cookieDay(30)}`;
				}
				$.ajax({
					url:'http://39.96.175.215:100/new',
					success(data){
						var res = JSON.parse(data)
							if((res[0].id == $("#id").val() && res[0].password == $("#password").val())||(res[1].id == $("#id").val() && res[1].password == $("#password").val())){
								window.location.href ="http://39.96.175.215:100/news";
							}
							else{
								alert("登录账号或密码错误")
							}	
					},
					error(){
						alert("请检查网络配置")
					}
				})
			})
		})	
	</script>
</head>
<body>
	<div class="dljiemian">
		<ul>
			<li>帐号:　
				<input type="text" placeholder="请输入手机号/账号" id="id"></li>
			<li>密码:　
				<input type="password" placeholder="请输入6位密码" id="password"></li>
			<li>
				记住用户名和密码:<input type="checkbox" id="checkbox">
			</li>
			<li>	
				<a href="" id="denglu">登录</a>
			</li>
			
		</ul>
	</div>
	
</body>
</html>